<include file="/public/header" />

<style>
    .layui-card-body {
        padding-left: 0;
    }

    .layui-form-item .layui-input-inline {
        width: 220px;
    }

    .layui-card-body {
        padding-left: 0;
    }

    .layui-form-item .layui-input-inline {
        width: 220px;
    }

    body {
        background-color: #fff;
    }

    .proints {
        margin: 10px 0;
    }

    .title {
        font-weight: bold;
        padding: 15px 0;
        font-size: 18px;
    }

    .products {
        width: 100%;
    }

    .products td,
    .products th {
        padding: 12px 15px;
        box-sizing: border-box;
        border: 1px solid #ebeef5;
    }

    .products .label {
        background-color: #f5f7fa;
        font-weight: bold;
    }

    .width1 {
        width: 23%;
        float: left;
        margin-right: 2%;
    }

    .subbord {
        border: 1px solid #ebeef5;
        padding: 20px 2%
    }

    .subbord table {
        margin: 20px 0;
        width: 100%;
    }

    .width2 {
        width: 46%;
        margin: 0 2%;
        float: left;
    }

    .width3 {
        width: 25%;
        float: left;
    }

    .sclass {
        position: absolute;
        z-index: 999999;
        background: #fff;
        padding: 5px;
        border: 1px solid #dedede;
        display: none;
    }
</style>


<div class="layui-fluid layui-bg-white">
    <form class="layui-form layui-form-pane">
        <input type="text" value="{$data.id}" name="id" hidden="" />
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('ID')}</label>
            <div class="layui-input-block">
                <input value="{$data.id}" readonly disabled class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('产品')}</label>
            <div class="layui-input-block">
                <select name="goodid" lay-search="" lay-filter="goodid">
                    <option value="">{:__('选择产品')}</option>
                    <foreach $productlist as $v>
                        <option value="{$v.id}" disabled <if $data.productid == $v.id> selected</if>>{$v.title}(编码:{$v.codes}规格:{$v.spec})</option>
                    </foreach>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:__('生产锅数')}</label>
            <div class="layui-input-block">
                <input name="guo" value="{:floor($data.guo*100)/100}" placeholder="{:__('请输入生产锅数')}" type="number"
                    class="layui-input" lay-verify="required" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('规格')}</label>
            <div class="layui-input-block">
                <input name="spec" value="{$data.product_spec}" placeholder="{:__('请输入规格重量')}" type="text"
                    class="layui-input" lay-verify="required" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('备注')}</label>
            <div class="layui-input-block">
                <input name="remark" value="{$data.remark}" placeholder="{:__('备注说明')}" type="text"
                    class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('配方')}</label>
            <div class="layui-input-block">
                <div class="peifang" name="peifang"></div>
            </div>
            <div class="layui-input-block">
                <span style="color: red;">注:为不影响原材料库存计算，暂不支持修改产品和配方，如果需要修改请删除当前产品后再添加新配方产品</span>
            </div>
        </div>
        <table class="products" id="products">
            <thead>
                <tr>
                    <th width="150" class="label">配方原材料</th>
                    <th class="label">每锅材料重量(KG)</th>
                </tr>
            </thead>
            <tbody id="layui-cailiao-content">
                <volist name="$data.list" id="vo" key="k">
                    <tr>
                        <td>{$vo.materialtitle}
                        </td>
                        <td>{$vo['size']}
                        </td>
                        <!-- <td>
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i
                                    class="layui-icon layui-icon-delete"></i></button>
                        </td> -->
                    </tr>
                </volist>
            </tbody>
        </table>
        <!-- <button type="button" class="layui-btn layui-btn-normal layui-cailiao-add">{:__('增加材料')}</button> -->
        <div class="layui-footer layui-form-item layui-center">
            <button class="layui-btn layui-btn-primary" type="button" sa-event="closeDialog">取消</button>
            <button data-reload="top" class="layui-btn layui-btn-normal" lay-filter="submitIframe" type="button" lay-submit>提交</button>
        </div>
    </form>
</div>
<include file="/public/footer" />
<include file="/public/static" />
<script>
    layui.use(['form', 'jquery', 'layedit', 'admin'], function () {
        var form = layui.form;
        var jquery = layui.jquery;
        var formula = {$formula|raw};
    var material = {$material|raw};
    var peifang = "{$data.formulaid|raw}";
    //默认隐藏地址信息
    layui.$('#sousuo').hide();
    //点击元素外其它地方隐藏
    layui.$('body').bind('click', function (event) {
        layui.$('#sousuo').hide();
    });
    //阻止冒泡
    layui.$('#sousuo').click(
        function (e) {
            e.stopPropagation()
        }
    );
    //输入框的值改变时触发
    layui.$("#tipinput").on("input", function (e) {
        //获取input输入的值
        layui.$.get("{:url('/ajax/getoproduct')}",
            { keyword: e.delegateTarget.value, type: 1 }, function (res) {
                if (res.code == 200 && res.data.length > 0) {
                    str = '';
                    layui.$.each(res.data, function (i, obj) {
                        str += '<input lay-filter="getsou" type="radio" name="suosuo" value="' + obj.id + '" title="' + obj.title + '"><br/>';
                    });
                    layui.$('#sousuo').html(str);
                    layui.$('#sousuo').show();
                    form.render();
                } else {
                    layui.$('#sousuo').hide();
                }
                layui.$('input[name=spec]').val('');
                layui.$('input[name=goodid]').val(0);
                xmd.setValue([]);
                dratable([], 0);
            }, 'json');
    });
    //监听地址选择
    form.on('radio(getsou)', function (data) {
        layui.$.get("{:url('/ajax/getoproduct')}",
            { keyword: data.value, type: 2 }, function (res) {
                if (res.code == 200 && res.data) {
                    layui.$('input[name=title]').val(res.data.title);
                    layui.$('input[name=spec]').val(res.data.spec);
                    layui.$('input[name=goodid]').val(res.data.id);
                    xmd.setValue([res.data.formulaid]);
                    dratable(res.data.list, 0);
                    layui.$('#sousuo').hide();
                    form.render();
                }
            }, 'json');
    });
    // 监听权限提交
    form.on("submit(submitPage)", function (post) {
        // 获取用户id
        var pageThat = layui.$(this),
            _pageUrl = !status ? pageThat.attr('lay-edit') : pageThat.attr('lay-add');
        // 开始POST提交数据
        layui.$.post(_pageUrl,
            post.field, function (res) {
                if (res.code === 200) {
                    layer.msg(res.msg, function () {
                        location.reload();
                    });
                    pageThat.attr("disabled", true);
                }
                else {
                    layer.error(res.msg);
                }

            }, 'json');
        return false;
    })
    var datas = []; //配方数据
    var xmd = xmSelect.render({
        disabled: true,
        el: '.peifang',
        tips: '请选择配方',
        initValue: [peifang],
        name: 'peifang',
        filterable: true,
        radio: true,
        repeat: true,
        clickClose: true,
        cascader: {
            show: true,
            strict: true,
            indent: 250
        },
        prop: {
            name: 'title',
            value: 'id',
        },
        tree: {
            show: true,
            strict: false,
            showLine: false,
            simple: true,
        },
        model: {
            icon: 'hidden',
            label: {
                type: 'text'
            }
        },
        theme: {
            color: '#1890FF'
        },
        data() {
            return formula
        },
        on: function (onresult) {
            //change, 此次选择变化的数据,数组
            var change = onresult.change;
            // 开始POST提交数据
            var number = layui.$("#tipinput").val();
            getdratable(change[0]['id'], number);

        },
    })
    //输入框的值改变时触发
    layui.$("#tipinput").on("input", function (e) {
        //获取input输入的值
        if (datas.length > 0) {
            dratable(datas, e.delegateTarget.value);
        }
    });
    //请求ID并渲染表格
    var getdratable = function (id, number) {
        layui.$.ajax({
            url: '{:url("/system/formula/fadd")}',
            type: 'get',
            dataType: 'json',
            data: {
                id: id
            },
            success(data) {
                datas = [];
                if (data.code == 200) {
                    datas = data.data.list;
                    dratable(data.data.list, number);
                }
            }
        });
    }
    // 根据数据渲染表格
    var dratable = function (data = [], number = 0) {
        number = Number(number);
        var html = '<tr>';
        layui.$.each(data, function (index, type) {
            html += '<td class="content"><select name="list[' + index + '][material]" lay-search=""><option value="">搜索原材料</option>';
            layui.$.each(material, function (key, mdata) {
                html += '<option value="' + mdata.id + '"';
                if (type.material == mdata.id) {
                    html += 'selected';
                }
                html += '>' + mdata.title + '</option>';
            });
            html += '</select></td>';
            html += '<td class="content">' + type.size + '<\/td>';
            // html += '<td class="content"><button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon layui-icon-delete"><\/i><\/button><\/td>';
            html += '</tr>';
        });
        // html += '';
        layui.$('#layui-cailiao-content').html(html);
        form.render();
    }
    // 增加材料
    // jquery('.layui-cailiao-add').on('click', function () {

    //     console.log(222);
    //     var trnumber = jquery('#layui-cailiao-content tr').length;
    //     var html = '<tr>';
    //     html += '<td><select name="list[' + trnumber + '][material]" lay-search=""><option value="">可输入搜索<\/option>';
    //     layui.$.each(material, function (index, type) {
    //         html += '<option value="' + type.id + '">' + type.title + '</option>';
    //     });
    //     html += '<\/select><\/td>';
    //     html += '<td><input name="list[' + trnumber + '][size]" type="text" class="layui-input"  lay-verify="required" ><\/td>';
    //     html += '<td><button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon layui-icon-delete"><\/i><\/button><\/td>';
    //     html += '<\/tr>';
    //     jquery('#layui-cailiao-content').append(html);
    //     form.render();
    // })
    // 删除签到数据
    jquery('body').on('click', '#layui-cailiao-content .layui-btn', function () {
        jquery(this).parents('tr').remove();
    })
  });
</script>